<script>
let projectComponent = {
    template: `
      <div style="width: 100%">

        <p style="margin-bottom: 15px;">
            <span class="contentH3"> 项目列表</span>
            <el-form :inline="true" class="form-inline recordSearchForm" style="margin-top: 10px">
                <el-form-item size="mini">
                <el-input placeholder="项目名称" v-model="searchForm.titleLike"></el-input>
            </el-form-item>
             <el-button  type="primary" size="mini" @click="getLists()" > 搜索</el-button>

            <span class="frBtn" style="">

            <img src="/static/images/daoru.png" style="margin-right: 10px;width:20px;height: 20px" @click="exportData()" alt="导入"/>
            <img src="/static/images/daochu.png" style="margin-right: 10px;width:20px;height: 20px" @click="upload()"  alt="导出"/>
            <el-button v-if="currentTally.role!='viewer'" type="danger" size="mini" @click="projectForm={};projectDialog=true" ><i class="el-icon-plus" /> 新增项目</el-button>
            </span>

            </el-form>
        </p>




        <div class="clearfix">

        </div>
        <div>
            <template>
                <el-table
                        :data="projectList"
                        type="index"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="名称" sortable>
                    </el-table-column>
                    <el-table-column label="操作" v-if="currentTally.role!='viewer'">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="editProject(scope.row)"></el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteProjectRow(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!--项目编辑表单框------>
    <project-form :dialogShow="projectDialog" :formRow="projectForm" @modalClose="modalClose"></project-form>

    <export-dialog :dialogShow="exportDialog" @modalCloseq="modalExportDialogClose" :downloadUrl="'https://static.gongsizhang.com/muban/project_export.xlsx'" :uploadUrl="'/api/project/import-data'"></export-dialog>
        </div>
    </div>
    `,
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        }
    },
    data:function(){
        return {
            projectDialog:false,
            exportDialog:false,
            projectList:[],
            projectForm:{},
            searchForm:{}

        }
    },
    mounted(){
        this.getLists()
    },
    methods:{
        modalClose(){
            this.getLists()
            this.projectDialog = false
        },
        modalExportDialogClose(){
            this.getLists()
            this.exportDialog = false
        },
        exportData(){
            let that = this
            axios.get('/api/project/export',{
                method: 'get',
                headers: {'token': loginToken},
                params: {
                    tally_id:that.currentTallyId
                }
            }).then(function(res) {
                if(res.data.status === 'success'){
                    let filepath = res.data.data.filepath
                    let a = document.createElement('a');
                    a.target = "_blank";
                    a.href = filepath;
                    a.click();
                    console.log(res.data)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        upload(){
            this.exportDialog = true;
        },
        getLists(){
            let params = this.searchForm;
            params['tally_id'] = this.currentTallyId;
            let that = this;
            axios.get('/api/project/lists',{
                method: 'get',
                headers: {'token': loginToken},
                params:params
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.projectList = res.data.data
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        editProject(row){
            this.projectForm = JSON.parse(JSON.stringify(row))
            this.projectDialog = true;
        },
        deleteProjectRow(row){
            let that = this
            this.$confirm('确定要删除该行：'+row['title'], '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action === 'confirm') {
                        let postUrl = '/api/project/del'
                        axios.post(postUrl,{id:row['id'],tally_id:that.currentTallyId},{
                            headers: {'token': loginToken},
                        }).then(function(res) {
                            if(res.data.status === 'success'){
                                that.$message({
                                    type: 'success',
                                    message: '操作成功~'
                                })
                                that.$store.dispatch('getProjectList',that.currentTallyId)
                                that.getLists()
                            }else{
                                that.$message({
                                    type: 'error',
                                    message: '解析数据失败:'+res.data.error_message
                                })
                            }
                        })
                    }
                }
            });
        },
    }
}
</script>
